<template>
  <el-card shadow="never" class="border-none mt-6">
    <el-row>
      <el-col :span="8">
        <div class="box-header flex1">
          <text-convert-img :src="sellerDto.logoUrl" :width="78" :height="78" :text="sellerDto.name" />
          <div class="text">
            <div>{{ sellerDto.name }}</div>
            <a :href="sellerDto.url" target="_blank"><iconpark-icon name="amazon"></iconpark-icon></a>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="label-container"><label style="width: 80px; white-space: nowrap">公司名称：</label><span v-text="sellerDto.bsName"></span></div>
        <div class="label-container">
          <label style="width: 80px; white-space: nowrap">公司地址：</label><bs-address :value="sellerDto.bsAddress" />
        </div>
      </el-col>
      <el-col :span="8" class="text-center">
        <div class="label-container">
          <label style="width: 80px; white-space: nowrap">卖家类型：</label><span v-text="sellerDto.type ?? 'none'"></span>
        </div>
      </el-col>
    </el-row>
    <div class="info-data">
      <div class="d-item">
        <h3>变体数量</h3>
        <p><em v-text="sellerDto.productCount ?? '-'"></em></p>
      </div>
      <div class="d-item">
        <h3>销售数量</h3>
        <p><em v-text="sellerDto.saleCount ?? '-'"></em></p>
      </div>
      <div class="d-item">
        <h3>预估销售额</h3>
        <p>
          <em><fixed-amount :value="sellerDto.saleVolume ?? '-'" :symbol="sellerDto.symbol" /></em>
        </p>
      </div>
      <div class="d-item">
        <h3>卖家平均价格</h3>
        <p>
          <em><fixed-amount :value="sellerDto.saleVolume / sellerDto.saleCount" :symbol="sellerDto.symbol" /></em>
        </p>
      </div>
      <div class="d-item">
        <h3>卖家评分</h3>
        <p><em v-text="sellerDto.reviewsRating"></em></p>
      </div>
      <div class="d-item">
        <h3>卖家评论数</h3>
        <p><em v-text="sellerDto.reviewsCount"></em></p>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import TextConvertImg from '@/plugins/pair/text-convert-img.vue'
import { onMounted, ref, watch } from 'vue'
import { getSeller } from '@/api/common'
import FixedAmount from '@/plugins/pair/fixed-amount.vue'
import BsAddress from '@/plugins/pair/bs-address.vue'
const props = defineProps({
  sellerId: {
    type: String,
    default: '',
  },
})
const sellerDto = ref<any>({
  sellerAddress: {},
})
const reqSeller = () => {
  if (props.sellerId) {
    getSeller(props.sellerId).then((res) => {
      sellerDto.value = res.data
    })
  }
}

watch(
  () => props.sellerId,
  () => {
    reqSeller()
  }
)

onMounted(() => {
  reqSeller()
})
</script>
<style scoped lang="scss">
.label-container {
  align-items: normal;
  margin-bottom: 5px;
}
</style>
